{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet"
          href="{% static 'AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css' %}">
    <link rel="stylesheet"
          href="{% static 'AdminLTE/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' %}">
    <style>
        /* dataTables列内容居中 */
        #example1 > tbody > tr > td {
            text-align: center;
        }

        /* dataTables表头居中 */
        #example1 > thead:first-child > tr:first-child > th {
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
{% endblock %}

{% block content %}

    <div class="row">
        <div class="col-lg-12">
            <br>
            <div class="col-sm-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="userLogStartTime" class="form-control pull-right"
                               data-date-format="yyyy-mm-dd" placeholder="开始时间">
                        <span class="input-group-addon">
										                    <span class="glyphicon glyphicon-calendar"></span>
										                </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" id="userLogEndTime" class="form-control pull-right"
                               data-date-format="yyyy-mm-dd" placeholder="结束时间">
                        <span class="input-group-addon" onclick="searchUserLog()">
										                    <span class="glyphicon glyphicon-search"
                                                                  style="cursor: pointer"></span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <!-- /.box -->
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <table id="example1" class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>操作用户</th>
                            <th>操作用户IP</th>
                            <th>操作内容</th>
                            <th>操作时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for user_log in user_logs %}

                            <tr>
                                <td>{{ user_log.user }}</td>
                                <td>{{ user_log.remote_ip }}</td>
                                <td>{{ user_log.content }}</td>
                                <td>{{ user_log.c_time|date:"Y-m-d H:i:s" }}</td>
                                <td>
                                    <button type="button" class="btn btn-default" data-id="{{ user_log.id }}"><i
                                            class="glyphicon glyphicon-trash"></i></button>
                                </td>
                            </tr>

                        {% endfor %}

                        </tbody>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
    <!-- /.row -->

{% endblock %}


{% block js %}
    <!-- DataTables -->
    <script src="{% static 'AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js' %}"></script>
    <!-- bootstrap datepicker -->
    <script src="{% static 'AdminLTE/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' %}"></script>
    <script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>
    <script src="{% static 'js/jquery-dateFormat.min.js' %}"></script>
    <script>
        $(function () {
            table = $('#example1').DataTable({
                columnDefs: [{
                    'targets': [-1],
                    'orderable': false
                }],
                "order": [[3, "desc"]]
            });

            //Date picker
            $('#userLogStartTime, #userLogEndTime').datepicker({
                autoclose: true
            });
        });

        //删除日志
        $('#example1 tbody').on('click', 'button', function () {
            {% if perms.users.delete_userlog %}
                let pk = $(this).attr('data-id');
                let tr_obj = $(this).parents('tr');
                $.confirm({
                    title: 'Tips',
                    content: '确定要删除这条记录么？',
                    type: 'red',
                    buttons: {
                        Ok: function () {
                            $.ajax({
                                url: '/api/user_log/' + pk + '/',
                                method: 'DELETE',
                                success: function () {
                                    table.row(tr_obj).remove().draw();
                                },
                                error: function (data) {
                                    $.alert({
                                        title: 'Tips',
                                        type: 'red',
                                        content: '删除失败！' + data.responseText,
                                    })
                                }
                            })
                        },
                        Cancel: function () {
                            //
                        }
                    }
                });
            {% else %}
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '抱歉！您没有删除操作日志的权限！如有疑问，请联系管理员！',
                });
            {% endif %}
        });

        // 按日期搜索
        function searchUserLog() {
            let startTime = $('#userLogStartTime').val();
            let endTime = $('#userLogEndTime').val();
            if (startTime.length === 0 || endTime.length === 0) {
                $.alert({
                    title: 'Tips',
                    type: 'red',
                    content: '请选择起始时间！'
                });
                return false;
            }
            $.ajax({
                dataType: "JSON",
                url: '{% url 'user_log' %}',
                type: "POST",  //提交类似
                data: {
                    "startTime": startTime,
                    "endTime": endTime,
                },
                success: function (response) {
                    if (response.records.length === 0) {
                        $.alert({
                            title: 'Tips',
                            type: 'red',
                            content: '该时间段内没有任何操作！'
                        });
                    } else {
                        $.alert({
                            title: 'Tips',
                            type: 'green',
                            content: '查询完成！'
                        });
                        table.clear().draw();
                        for (let i = 0; i < response.records.length; i++) {
                            let result = response.records[i];
                            let c_time = $.format.date(result['c_time'], "yyyy-MM-dd HH:mm:ss");
                            let counter = 1;
                            table.row.add([
                                result['user'],
                                result['remote_ip'],
                                result['content'],
                                c_time,
                                '<button type="button" class="btn btn-default" data-id="' + result['id'] + '"><i class="glyphicon glyphicon-trash"></i></button>'
                            ]).draw();
                            counter++;
                        }
                    }
                },
                error: function (response) {
                    $.alert({
                        title: 'Tips',
                        type: 'red',
                        content: response.responseText
                    });
                }
            })
        }
    </script>

{% endblock %}

